<template>
  <view>
    <view
      class="grace-btdialog-shade"
      :style="{ top: top + 136 + 'rpx' }"
      v-if="show"
      @tap.stop="closeDialog"
      @touchmove.prevent.stop="stopFun"
    >
      <view
        :class="['dialog', 'gdIn', isIpx ? 'grace-ipx-bottom' : '']"
        @tap.stop="stopFun"
      >
        <view class="content" @tap.stop="stopFun">
          <view
            class="shareSwiper grace-flex grace-flex-vcenter"
            :style="{ height: 1003 + 'rpx' }"
          >
            <!-- <view class="prve grace-text-center" @tap.stop="sharePive">
              <image src="/static/share/pive.png" />
            </view> -->
            <view class="grace-relative">
              <swiper
                class="swiper-list"
                :current="swiperCurrent"
                @change="onChange"
                style="height: 1003rpx; width: 651rpx"
              >
                <swiper-item v-for="(iamge, index) in shareImgs" :key="index">
                  <view class="grace-relative">
                    <image
                      :src="iamge"
                      style="width: 651rpx; height: 1003rpx"
                    />
                    <view class="qrcode">
                      <cloudQrcode
                        v-if="qrText != ''"
                        ref="qrcode"
                        :val="qrText"
                        :size="size"
                        :unit="unit"
                        :onval="onval"
                        :loadMake="loadMake"
                        :showLoading="true"
                        @result="qrR"
                      />
                      <!-- <view class="in_code">邀请码：{{ shareCode }}</view> -->
                      <image
                        src="/static/wallet/not_recharge.png"
                        v-if="!qrText"
                        style="width: 422rpx; height: 408rpx"
                      />
                    </view>
                  </view>
                </swiper-item>
              </swiper>
              <canvas
                style="
                  width: 500px;
                  height: 766px;
                  background: rgba(0, 0, 0, 0);
                  position: absolute;
                  left: 0;
                  top: 1000px;
                "
                canvas-id="poster"
              ></canvas>
              <!-- <view class="color-w grace-text-center font-22 mt-20">
                {{ $t("my.invite.swiperTips") }}
              </view> -->
            </view>
            <!-- <view class="next grace-text-center" @tap.stop="shareNext">
              <image src="/static/share/next.png" />
            </view> -->
          </view>
          <view class="shareBtnPic" @tap.stop="onTapSaveImgage">
            {{ $t("my.invite.shareBtnPic") }}</view
          >
          <!-- <view class="grace-bg-white shareDialogSelect">
            <view class="font-26 weight-bold title mb-20">
              {{ $t("my.invite.shareTitle") }}
            </view>
            <view class="grace-grids four grace-flex-vcenter">
              <view class="items" @tap.stop="onTapSaveImgage">
                <view class="grace-flex-center">
                  <image src="/static/share/pic.png" class="image" />
                </view>
                <view class="grace-text-center font-24 color-b3 mt-15 mb-15">
                  {{ $t("my.invite.shareBtnPic") }}
                </view>
              </view>
              <view class="items" @tap.stop="onTapCopy">
                <view class="grace-flex-center">
                  <image src="/static/share/link.png" class="image" />
                </view>
                <view class="grace-text-center font-24 color-b3 mt-15 mb-15">
                  {{ $t("my.invite.shareBtnLink") }}
                </view>
              </view>
            </view>
            <view class="close" @tap.stop="closeDialog">
              {{ $t("my.invite.close") }}
            </view>
          </view> -->
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    shareImgs: {
      type: Array,
    },
    shareHost: {
      type: String,
      default: "",
    },
    shareCode: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      isIpx: false,
      swiperHeight: 0,
      swiperCurrent: 0,

      size: 170, // 二维码大小
      unit: "upx", // 单位
      qrText: "",
      onval: true, // val值变化时自动重新生成二维码
      loadMake: true, // 组件加载完成后自动生成二维码
      src: "", // 二维码生成后的图片地址或base64
    };
  },
  computed: {
    ...mapGetters({ currentLocale: "system/locale" }),
  },
  created() {
    uni.getSystemInfo({
      success: (res) => {
        // #ifdef MP
        var model = res.model;
        if (model.search("iPhone X") != -1) {
          this.isIpx = true;
        }
        // #endif

        this.swiperHeight =
          res.screenHeight - res.statusBarHeight - 44 - uni.upx2px(340);
      },
    });
    this.qrText =
      this.shareHost +
      "?code=" +
      this.shareCode +
      "&locale=" +
      this.currentLocale;
  },
  watch: {
    shareHost() {
      this.qrText = this.shareHost + "?code=" + this.shareCode;
      "&locale=" + this.currentLocale;
    },
    shareCode() {
      this.qrText = this.shareHost + "?code=" + this.shareCode;
      "&locale=" + this.currentLocale;
    },
  },
  methods: {
    closeDialog() {
      this.$emit("closeDialog");
    },
    stopFun() {},

    qrR: function (imgSrc) {
      this.src = imgSrc;
    },

    sharePive() {
      if (this.swiperCurrent == 0) {
        return;
      }
      this.swiperCurrent--;
    },
    onChange: function (e) {
      this.swiperCurrent = e.detail.current;
    },
    shareNext() {
      if (this.swiperCurrent + 1 == this.shareImgs.length) {
        return;
      }
      this.swiperCurrent++;
    },

    onTapSaveImgage() {
      uni.showLoading({ title: this.$t("common.tips.saving"), mask: true });
      let ctx = uni.createCanvasContext("poster");
      uni.getImageInfo({
        src: this.shareImgs[this.swiperCurrent],
        success: (res) => {
          ctx.drawImage(res.path, 0, 0, 500, 766);
          ctx.save();

          ctx.beginPath();
          ctx.setFillStyle("#FFFFFF");
          ctx.fillRect(40, 590, 140, 140);

          ctx.beginPath();
          ctx.drawImage(this.src, 44, 594, 130, 130);

          // ctx.setFontSize(20);
          // ctx.fillText(`邀请码:${this.shareCode}`, 345, 750);

          ctx.draw(false, () => {
            uni.canvasToTempFilePath({
              canvasId: "poster",
              width: 500,
              height: 766,
              success: (res) => {
                uni.saveImageToPhotosAlbum({
                  filePath: res.tempFilePath,
                  success: () => {
                    this.makeToast(this.$t("my.invite.savePidTips"));
                  },
                  complete: () => {
                    uni.hideLoading();
                  },
                });
              },
            });
          });
        },
      });
    },
    onTapFriend() {
      this.makeToast("未启用");
    },
    onTapGroup() {
      this.makeToast("未启用");
    },
    onTapCopy() {
      this.handleCopy({ content: this.shareHost + "?code=" + this.shareCode });
    },
  },
};
</script>
<style>
@keyframes gdIn {
  from {
    bottom: -100px;
  }

  100% {
    opacity: 0px;
  }
}

.gdIn {
  animation: fadeIn 200ms linear;
}

.grace-btdialog-shade {
  position: absolute;
  width: 100%;
  left: 0;
  top: 160rpx;
  bottom: 0;
  z-index: 99;
  background: rgba(0, 0, 0, 0.5);
  padding-top: 80rpx;
}

.grace-btdialog-shade .dialog {
  width: 700rpx;
  height: auto;
  border-radius: 20rpx;
  position: absolute;
  top: 0rpx;
  bottom: 20rpx;
  left: 25rpx;
}

.grace-ipx-bottom {
  padding-bottom: 68rpx !important;
}

.grace-btdialog-shade .title {
  width: 100%;
}

.grace-btdialog-shade .content {
  width: 100%;
  z-index: 0;
}

.shareSwiper {
  width: 100%;
  position: relative;
  left: 20rpx;
}

.shareSwiper .prve,
.shareSwiper .next {
  width: 100rpx;
}

.shareSwiper .prve image,
.shareSwiper .next image {
  width: 36rpx;
  height: 36rpx;
}

.shareSwiper .swiper-list {
  width: 500rpx;
}

.shareSwiper .qrcode {
  position: absolute;
  width: 170upx;
  height: 170upx;
  top: 774upx;
  left: 53upx;
  background: #ffffff;
  padding: 4upx;
}

.shareSwiper .qrcode image {
  width: 100rpx !important;
  height: 100rpx !important;
  margin-left: 10rpx;
  margin-top: 10rpx;
}

.shareDialogSelect {
  border-radius: 20rpx;
}

.shareDialogSelect .title {
  padding: 30rpx 40rpx 10rpx 40rpx;
}

.close {
  line-height: 80rpx;
  border-top: 1rpx dashed #999999;
  text-align: center;
}

.four > .items {
  flex: 1;
}

.items .image {
  width: 90rpx;
  height: 90rpx;
}
.shareBtnPic {
  width: 516rpx;
  height: 100rpx;
  background-image: url("/static/auth/login/btn_bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-radius: 55px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  /* margin-bottom: 60rpx; */
  margin-top: 80rpx;
  line-height: 100rpx;
  text-align: center;
  font-size: 34rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #2b2c3e;
}
.in_code {
  font-size: 24rpx;
  width: 300rpx;
  position: relative;
  right: 40rpx;
  top: 20rpx;
  color: #fff;
}
</style>
